import React from 'react';
import {StyleSheet, TouchableOpacity} from 'react-native';
import {dpw12, dpw16, dpw32, dpw44, dpw6} from '../constants';
import {ObserverText} from './ObserverText';
import {SvgLeft} from './svg';
import {ObserverView} from './ObserverView';

interface HeaderProps {
  title: string;
  navigation: any;
  isCenter?: boolean;
  isBeforeIcon?: boolean;
}
export const Header = (props: HeaderProps) => {
  const {title, navigation, isCenter, isBeforeIcon = true} = props;

  const goBack = () => {
    if (navigation) {
      navigation.goBack();
    }
  };

  return (
    <ObserverView style={styles.box}>
      {isBeforeIcon && (
        <TouchableOpacity onPress={goBack}>
          <SvgLeft colorKey="color_3" />
        </TouchableOpacity>
      )}
      <ObserverText
        style={{marginHorizontal: isCenter ? 'auto' : dpw12}}
        tKey={title}
        type="header"
      />
    </ObserverView>
  );
};

const styles = StyleSheet.create({
  box: {
    flexDirection: 'row',
    height: dpw44,
    paddingHorizontal: dpw16,
    paddingVertical: dpw6,
    alignItems: 'center',
  },
});
